<template>
	<view class="page-container">
		<navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
		<loading :showLoaded.sync="showLoaded"></loading>
		<view class="imageContainer">
			<image webp="true" :src="detail.imgUrl + '?imageMogr2/format/webp' || detail.imgUrl"
				:data-src="detail.imgUrl" class="slide-image" mode="widthFix" />
		</view>
		<view style="padding: 30rpx;">
			<view class="cart-title flex-box">
				<div class="item-title-left ellipsis">{{detail.itemName }}</div>
				<button class="share-btn share-right" open-type="share">
					<div class="share-icon flex-column">
						<image
							src="https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/icon/icon_share.png"
							mode="widthFix"></image>
						<div class="share-txt">分享</div>
					</div>
				</button>
			</view>
			<!-- <view class="material-tag">{{detail.itemAssistantTitle || ''}}</view> -->
		</view>
		<!-- <view :style="{paddingBottom: ((detail.isSaleStore == 'Y') ? (isIpx ? 75 : 55) : 0) + 'px' }" > -->
		<view>
			<u-parse :content="uData" :isGtrDesc.sync="isGtrDesc" @shows="shows"
				style="font-size:0 !important;"></u-parse>
			<view style=" clear: both;"></view>
			<!-- <view v-if="utoolsData"  >
				<utools-parse id="utools-parse" page="category" :utools-data="utoolsData"  ></utools-parse>
			</view>git  -->
		</view>
		<view v-if="detail.isSaleStore == 'Y' && hasReady" :class="[isIpx ? 'ipx-transparent-box' : 'transparent-box']">
		</view>
		<!-- <view v-if="detail.isSaleStore == 'Y' " class="isGtrBottom " :class="[isIpx ? 'fix-iphonex-button' : '']"> -->
		<view v-if="detail.isSaleStore == 'Y' && hasReady" class="isGtrBottom"
			:class="[isIpx ? 'fix-iphonex-button' : '']">
			<view class="btnBox" @click="clickHandle()">即刻查看购买渠道</view>
		</view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
	</view>
</template>

<script>
	import {
		SYSTEM_INFO,
		MERCHANT_INFO,
		USER_INFO,
		USER_SPECICAL_INFO,
		CUSTOMER_INFO,
		CART_KEY
	} from '@/utils/constant';
	import tip from '@/utils/tip';
	import api from '@/api/api';
	import util from '@/utils/util';
	import NavBar from '../../components/common/navbar';
	import Loading from '../../components/common/loading';
	import uParse from './components/feng-parse/parse.vue';
	export default {
		components: {
			navBar: NavBar,
			loading: Loading,
			uParse: uParse,
		},
		data() {
			return {
				isShowCustomNavBar: true,
				// 组件所需的参数
				navbarData: {
					showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
					navbarTitle: '商品详情' //导航栏 中间的标题
				},
				goodsId: 1,
				detail: {},
				showLoaded: true,
				uData: '', // 商品描述
				isIpx: false,
				isGtrDesc: true,
				hasReady: false,
				nowPages: '',
				utoolsData: null
			}
		},
		computed: {
			bottomHeight() {
				if (this.detail.isSaleStore == 'Y') {
					if (this.isIpx) {
						return 75
					} else {
						return 55
					}
				} else {
					return 0
				}
			}
		},
		onLoad: async function(option) {
			let that = this;
			//接收上一个页面传过来的参数
			that.goodsId = option.id;
			that.getCurrentMerchantInfo();
			that.customerInfo = uni.getStorageSync(CUSTOMER_INFO) || {};
			let pages = getCurrentPages();
			//当前页面
			var currPage = pages[pages.length - 1];
			this.nowPages = currPage.route;
			this.utoolsData = await this.getHomeUtoolsData()
		},
		onShow: async function() {
			let that = this;
			let systemInfo = uni.getSystemInfoSync();
			let isIpx = systemInfo.model.indexOf('iPhone X') !== -1 || systemInfo.model.indexOf('iPhone1') !== -1 ||
				systemInfo.model.indexOf('unknown<iPhone13') !== -1 || systemInfo.model.indexOf('iPhone 12/13') !== -1;
			this.isIpx = isIpx;
			getApp().cl_tracker.track('mini_program_view', {
				path: this.nowPages,
				pageName: '门店商品详情',
			})
			setTimeout(() => {
				that.$commonSensors.pdpEvent('PDPView', that.detail, false, ['免税商品'], true, false)
			}, 2000)
		},
		// onUnload() {
		//   debugger
		//   uni.reLaunch({
		//     url: "pages/home/home"
		//   })
		// },
		methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
			shows(val) {
				this.showLoaded = val.showLoads;
			},
			async getHomeUtoolsData() {

				let json;
				if (this.utid) {
					json = await api.getUtoolsJsonP({
						utoolsId: this.utid,
						type: 'store_item_value '
					});
				} else {
					json = await api.getUtoolsJsonByRelevance({
						relevance:  this.goodsId,
						type: 'store_item_value '
					});
				}
				return json.success && json?.data ? JSON.parse(json.data) : null
			},
			clickHandle() {
				let that = this;
				let itemId = that.detail.id;
				// GTR商品-跳转门店列表埋点
				let clTrackPrams = {
					'c_product_name': that.detail.itemName,
					'c_product_brand': '麦卡伦 Macallan'
				}
				getApp().commonClTrack('c_ebmp_gtr_product_jump_to_store_list', clTrackPrams)
				that.$commonSensors.pdpEvent('PDPClick', that.detail, '即刻查看购买渠道', ['免税商品'], true, false)
				uni.navigateTo({
					url: '/pages/GTR/storeList?itemId=' +
						itemId
				});
			},
			// 判断是否有merchantInfo,没有则重新请求
			getCurrentMerchantInfo: async function() {
				let that = this;
				var merchantInfo = uni.getStorageSync(MERCHANT_INFO) || '';
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
				if (!customerInfo) {
					that.$commonFunction.commonLoginNew().then(res => {}).catch(function(res) {})
				}
				if (merchantInfo) {
					that.getStoreGoodsDetail(merchantInfo);
				} else {
					// 获取商户信息
					const accountInfo = uni.getAccountInfoSync(); // 小程序appId
					var merchantInfo = await api.merchantInfo(accountInfo.miniProgram.appId);
					if (merchantInfo.code === 200) {
						// 存储商户信息
						uni.setStorageSync(MERCHANT_INFO, merchantInfo.data);
						that.getStoreGoodsDetail(merchantInfo.data);
					} else {
						setTimeout(() => {
							that.hasReady = true
						}, 100);
					}
				}
			},
			// 商品详情信息
			getStoreGoodsDetail: async function() {
				let that = this;
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
				let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
				const json = await api.storeGoodsDetail({
						query: {
							merchantId: merchantInfo.cloudMerchantId,
						}
					},
					that.goodsId
				);
			
				if (json.code === 1000) {
					let data = json.data;

					let description = !!data.description ? data.description.replace('<br />', '<p></p>') : '';
					
					this.uData = description;
					// detail  商品详情信息
					that.detail = data;
					that.showLoaded = false;
					setTimeout(() => {
						that.hasReady = true
					}, 100);
				} else {
					setTimeout(() => {
						that.hasReady = true
					}, 100);
					uni.redirectTo({
						url: '/pages/util/pageNotFound'
					});
					// that.showLoaded = false;
					if (json.msg) {

					} else {
						this.handleShowTextToast('查看商品失败');
					}
				}
			},
			/**
			 * 公用分享方法
			 * @param  {[type]} params [description]
			 * @return {[type]}        [description]
			 */
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
				} else {
					this.$EFSTracking.trackingAction('SHARE_CARD', res.from, {});
				}
				const goodsPath = '/pages/GTR/item?id=' + this.detail.id
				let sharePic = this.detail.shareImgUrl ? this.detail.shareImgUrl : this.detail.imgUrl
				let shareName = this.detail.itemName ? this.detail.itemName : uni.getStorageSync('storeName') || 'THE MACALLAN EBOUTIQUE麦卡伦';
				this.$commonSensors.sensorsPageShare()
				this.$commonSensors.pdpEvent('PDPClick', this.detail, '分享', ['免税商品'], true, false)
				this.$sr.setContext({ share_title: shareName });
				return this.$commonFunction.commonShare(res, shareName, goodsPath, sharePic);
			},
			onShareTimeline() {
				let title = this.detail.itemName ? this.detail.itemName : uni.getStorageSync('storeName') || 'THE MACALLAN EBOUTIQUE麦卡伦';
				this.$sr.setContext({ share_title: title });
				return {
					title: this.detail.itemName,
					query: 'id=' + this.detail.id,
					imageUrl: this.detail.imgUrl
				};
			},
		}
	}
</script>

<style lang="less">
	.page-container {
		position: relative;
		width: 100%;
		// display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		// bottom: 80rpx;

		// background-color: #eee;
		font-size: 14px;
		top: 1rpx;

		// &.bottom100 {
		//   padding-bottom: 100rpx;
		// }
		.imageContainer {
			width: 100%;
			max-height: 750rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.flex-box {
			display: flex;
			flex-flow: row nowrap;
		}

		.cart-title {
			color: #444;
			font-size: 16px;
			margin-bottom: 15rpx;
			justify-content: space-around;
		}

		.cart-title .item-title-left {
			flex: 1;
			font-size: 30rpx;
			line-height: 50rpx;
		}

		.share-right {
			background-color: transparent;
		}

		.share-right .share-icon image {
			width: 50rpx;
			height: 50rpx;
		}

		.share-right .share-icon .share-txt {
			font-size: 10px;
		}

		// 材质标签
		.material-tag {
			color: #4d4d4d;
			margin-bottom: 25rpx;
			// text-align: center;
		}

		.isGtrBottom {
			width: 100%;
			position: fixed;
			bottom: 0 !important;
			background: #fff;
			z-index: 88;

			.btnBox {
				text-align: center;
				padding: 34rpx 0;
				background-color: #000;
				color: #fff;
				font-size: 32rpx;
			}
		}

		.fix-iphonex-button {
			bottom: 0 !important;
			padding-bottom: 20px;
		}

		.ipx-transparent-box {
			height: 150rpx;
			width: 100%;
			opacity: 0;
		}

		.ipx-transparent-box {
			width: 100%;
			opacity: 0;
			height: 110rpx;
		}

		// .fix-iphonex-button::after {
		//   content: ' ';
		//   position: fixed;
		//   bottom: 0 !important;
		//   height: auto !important;
		//   width: 100%;
		//   background: #fff;
		//    z-index: 88;
		//  }
	}
</style>
